<template>
    <div class="teacher">
        <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{ teacher.name }}</h2>
        <h2>年龄：{{ teacher.age }}</h2>
        <button @click="changName">修改姓名</button>
        <button @click="changAge">修改年龄</button>
        <button @click="changTeacher">修改教师</button>
    </div>
</template>

<script setup lang="ts" name="Teacher">
    import { reactive, watch } from 'vue'

    let teacher = reactive({
        name: '张三',
        age: 25
    })
    //修改对象里属性的函数
    function changName(){
        teacher.name+="*"
    }
    function changAge(){
        teacher.age+=1
    }
    //修改对象的函数
    function changTeacher(){
        //teacher={ name:"李四",age:25} //直接修改是修改不了的，不行的。
        //teacher=reactive({ name:"李四",age:25}) //使用reactive封装也不行
        // assign函数是把第二个参数的对象里的每一个属性值，复制给第一个参数的对象里的每一个同名属性。
        Object.assign(teacher,{ name:"李四",age:25});
    }
    /*
        情况三：监视【reactive】定义的【对象类型】数据，默认就是深度监视，
        因为reactive修改对象本质上就是修饰对象的属性值，而不是修改对象本身
        因为我们修改对象时使用的是Object.assign()函数，该函数本质上是在原对象基础上重新为属性复制，不是用新对象替换旧对象。
        参数1-teacher：是被监听的数据
        参数2-箭头函数：是监视的回调函数
        参数3-{}：是要配置的对象
        deep:true 开启深度监视
        immediate:true 在最开始初始化对象的时候，就让回调函数执行一次。
    */
    let a=watch(teacher,(newValue,oldValue)=>{
        console.log("我们修改了teacher",newValue,oldValue);
    },{deep:true,immediate:true})

    

</script>


<style scoped>
.teacher {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
